<template>
  <div class="data-table">
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <!-- 多选框组件 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="realname" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="cname" label="角色"> </el-table-column>

      <el-table-column prop="username" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="birthday" label="生日">
      </el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.avatar"
            :preview-src-list="[row.avatar]"
          >
          </el-image>
        </template>

      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini"
          @click="editUserHandler(row.id)"
          >修改</el-button>
          <el-button type="danger" size="mini"
           v-if="isShowSelfBtn(row.id)" 
           @click="deleteUser(row.id)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码部分 -->
    <el-pagination v-if="total !== 0" :current-page="page" background :page-size="pagesize" :page-sizes="[pagesize, 4, 6, 8]"
      layout="total,sizes,prev,pager,next,jumper" :total="total" @current-change="currentChange">
    </el-pagination>
  </div>
</template>

<script>
import { deleteUidToInfoApi } from '@/api/userApi'
export default {
  //接受setSelectUserIds方法等，
  props: ["tableData", "total", "loadData", "page", "setSelectUserIds",'setDialogVisible'],
  data() {
    return {
    }
  },
  computed: {
    pagesize() {
      // 修改.env文件设置全局变量，记得重启客户端，赋值给pagesize
      return Number(process.env.VUE_APP_PAGESIZE)
    }
  },
  methods: {
    //实现管理员没有删除按钮，id为传入的row.id
    isShowSelfBtn(id) {
      return !(this.$store.getters.userid === id)
    },
    // 点击修改弹出表单框，并传入参数userid(row.id)
    editUserHandler(userid){
      this.setDialogVisible(true,userid);
    },
    // 删除单个用户
    async deleteUser(userid) {
      try {
        await this.$confirm('您真的要删除此用户信息吗？', '删除提示', {
          confirmButtonText: '确认删除',
          cancelButtonText: '考虑一下'
        })
        // console.log('删除', userid)
        let ret = await deleteUidToInfoApi(userid)
        if (ret.code === 0) {
          // 删除成功后要再次请求一下数据,刷新显示数据
          this.loadData(this.page)
        }
      } catch (error) { }

    },
    currentChange(page) {
      let query = { ...this.$route.query, page }
      this.$router.replace({ query })
      this.loadData(page)
    },
    // 传入rows(数组)
    handleSelectionChange(rows) {
      // 在传入的数组参数中筛选出id,将其作为参数调用setSelectUserIds方法
      this.setSelectUserIds(rows.map(item => item.id))

    }
  }
}
</script>
  
<style  scoped>
.data-table {
  background: #fff;
  padding: 10px;
  margin-top: 5px;

  .el-pagination {
    margin-top: 10px;
  }
}
</style>
  